//固定定位
var posi = document.querySelector(".posi");
var posi_a =posi.querySelectorAll("a")
console.log(posi_a);
posi_a.forEach(item=>{
    item.addEventListener("click",(e)=>{
        e.preventDefault();
        let a_id =  item.getAttribute("href").slice(1);
        document.getElementById(a_id).scrollIntoView({behavior:"smooth"})
    })
})
window.addEventListener("scroll",(e)=>{
  if(document.documentElement.scrollTop>=900){
    posi.style.display = "flex"
  }
  if(document.documentElement.scrollTop<700){
    posi.style.display = "none"
  }
})


//第一个幻灯片的js

var slideindex = 1
F_first_image(1)
function F_first_text(n){
    F_first_image(slideindex = n)
}

function F_first_image(n){
    for(var i=0;i<5;i++){
        var first_image = document.querySelector(".first_image")
        var first_imageList = first_image.getElementsByTagName("img")
        first_imageList[i].style.display = "none"
        
    }
    first_imageList[n - 1].style.display = "block"
   
}
var first_text = document.querySelector(".first_text")
var first_textList = first_text.getElementsByTagName("a")
for(let i=0;i<first_textList.length;i++){
   
    first_textList[i].onmouseover = ()=>{
        for(var j =0;j<first_textList.length;j++){
            first_textList[j].classList.remove("active");
        }
        F_first_text(i+1)
        first_textList[i].classList.add("active")
    }
}
//第一个media盒子 //
// 运动函数
function move(ele,target,fn){
    for(let i in target){
        
        let distance_posx = parseInt(target[i]) - parseInt(window.getComputedStyle(ele)[i])
        
        if(distance_posx>0){
            let timer = setInterval(()=>{
                let distance = parseInt(target[i]) - parseInt(window.getComputedStyle(ele)[i])
                ele.style[i] = Math.floor(parseInt(window.getComputedStyle(ele)[i])) + distance/10 +"px"
              
                if(distance/10<1){
                    ele.style[i] =  parseInt(window.getComputedStyle(ele)[i]) + Math.floor(distance/10) + "px"
                   
                }
                if(Math.abs(parseInt(target[i]) - parseInt(window.getComputedStyle(ele)[i]))<1){
                  
                    ele.style[i] = Math.ceil(parseInt(window.getComputedStyle(ele)[i])) +"px"
                    if(fn){
                        fn()
                    }
                    clearInterval(timer)
                }
            
            },5)
        
        }
        if(distance_posx<0){
           
            let timer = setInterval(()=>{
                
                let distance = parseInt(window.getComputedStyle(ele)[i]) - parseInt(target[i])
                ele.style[i] = Math.ceil(parseInt(window.getComputedStyle(ele)[i])) - distance/10 +"px"
                if(distance/10<1){
                    ele.style[i] =  Math.ceil(parseInt(window.getComputedStyle(ele)[i])) - Math.ceil(distance/10) +"px"
                }
                if(Math.abs(parseInt(window.getComputedStyle(ele)[i]) - parseInt(target[i]))<1){
                    
                    ele.style[i] = Math.floor(parseInt(window.getComputedStyle(ele)[i])) +"px"
                    if(fn){
                        fn()
                    }
                    clearInterval(timer)
                }
               
            },5)
            
        


        }
       
    }
}

var first_media = document.querySelector(".first_media");
var first_media_move = document.querySelector(".first_media_move");
var first_media_ul = document.querySelector(".first_media_ul")
let li_list = first_media_ul.querySelectorAll("li")
let index = 1
clone()
function clone(){
    var first_media = document.querySelector(".first_media");
    var first_media_move = document.querySelector(".first_media_move");
    var first = first_media_move.firstElementChild.cloneNode(true);
    var last = first_media_move.lastElementChild.cloneNode(true);
    first_media_move.appendChild(first)
    first_media_move.insertBefore(last,first_media_move.children[0])
    first_media_move.style.width = (first_media_move.children.length) * 100 +"%"
    first_media_move.style.left = -first_media.clientWidth +"px"
    timer = setInterval(() => {
        index++
                
            move(first_media_move,{"left":-first_media.clientWidth*index},pos)
    }, 3000);



}
function pos(){

    if(index ===6){
        index = 1
        first_media_move.style.left = -first_media.clientWidth +"px"
    }
    let li_list = first_media_ul.querySelectorAll("li")
    console.log(li_list);
    for(let i=0;i<li_list.length;i++){
        li_list[i].classList.remove("first_media_active")
    }
    li_list[index-1].classList.add("first_media_active")   
}

for(let i=0;i<7;i++){
    var first_media = document.querySelector(".first_media");
    var first_media_move = document.querySelector(".first_media_move");
    var a_List = first_media_move.getElementsByTagName("a");
    a_List[i].style.width = first_media.clientWidth +"px"
    a_List[i].style.height = first_media.clientHeight +"px"
}

//第三个幻灯片
var div_List = document.querySelector(".box")


var div_List = div_List.getElementsByTagName("div")
console.log(div_List);

for (let i = 0; i < 17; i++) {
    div_List[i].onmouseover = () => {
       

        Left(div_List[i])
        Right(div_List[i])
    }
}

//向左自己要移动，不用包含原cur，需要包含自己
function Left(element) {
    var left = []
    console.log(element);
    left.push(element)
    while (element) {
        element = element.previousElementSibling;
        if (!element) {
            left = []
            break
        }
        if (element.classList.contains("cur")) {
            element.classList.remove("cur")
            break
        }
        left.push(element)
    }
    console.log(left);
    if (left[0] == null) {
        return
    }
    left[0].classList.add("cur")
    left.forEach((item) => {
        console.log();
       
        item.style.left = (parseInt(item.style.left) - 300) + "px"
    })
    
}
//向右自己不用移动，需要包含原cur,不用包含自己
function Right(element) {
    console.log(element);
    var right = []
    right.push(element)
    while (element) {

        element = element.nextElementSibling;
        if (!element) {
            right = []
            break
        }
        right.push(element)
        if (element.classList.contains("cur")) {
            right[0].classList.add("cur")
            right.splice(0, 1)
            break
        }

    }
    console.log(right);
    if (right[0] == null) {
        return
    }
    right[right.length - 1].classList.remove("cur")
    right.forEach((item) => {
        console.log(item);
        item.style.left = (parseInt(item.style.left) + 300) + "px"
    })
}

//第四个幻灯片
var slideindex = 1;
slide(slideindex)
function p(n){
    slide(slideindex-=n)
}
function a(n){
    slide(slideindex=n)
}
function slide(n){
    for(var i=0;i<3;i++){
        var shopping_choose = document.querySelector(".shopping_choose")
        var shop_alist = shopping_choose.getElementsByTagName("a")
        shop_alist[i].style.display = "none"
     
    }
    if(slideindex <1){slideindex=3};
    if(slideindex>3){slideindex=1}
    shop_alist[slideindex-1].style.display = "flex"
   
}
//第五个盒子
function Fetch() {


    fetch("https://assets.msn.cn/service/news/feed/pages/ntp?User=m-140F5C1BE1EB62F02B664F5BE0C56313&activityId=6623d392-e149-4959-9dec-2be899a29505&adppc=EdgeStart&apikey=0QfOX3Vn51YCzitbLaRkTTBadtWpgTN8NZLW0C1SEM&audienceMode=adult&backgroundImageIsSet=true&cm=zh-cn&column=c1&contentType=article,video,slideshow,webcontent&edgExpMask=262144&infopaneCount=17&it=app&memory=8&newsSkip=0&newsTop=48&ocid=anaheim-ntp-feeds&pgc=393&promotion=1698236965268_f_4_0&scn=APP_ANON&timeOut=1000&vpSize=174x744&wposchema=byregion", {
        method: "GET",
        headers: {
            // "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0",

        }
    })
        .then((res) => { return res.json(); })
        .then((data) => {
            console.log(data);
            w(data);
        }).catch(err => {
            console.log(err);
        })

    function w(data) {
        var i = 0
        for (i; i < 10; i++) {
            var r_num = Math.floor(Math.random() * 12)
            let url = data.sections[0].subSections[0].cards[0].subCards[r_num].url
            let title = data.sections[0].subSections[0].cards[0].subCards[r_num].title
            if (!title) {
                i -= 1
                continue
            }
            console.log(title)
            console.log(url)
            var news = document.querySelector(".news")
            var news_a = news.getElementsByTagName("a")
            news_a[i].href = url
            news_a[i].getElementsByTagName("p")[0].innerHTML = title
        }
    }
    //生成随机数
}
//展示数据1
var newsbtn = document.querySelector(".newsbtn")

var t = null
newsbtn.onclick = ()=>{

    if(t){
        clearTimeout(t)
        console.log("clear");
        t = null
    }    
    t = setTimeout(()=>{Fetch();console.log("执行了Fetch()");},3000)
}

//备用的网站API
function Fetch2() {


    fetch("https://assets.msn.cn/service/news/feed/pages/channelfeed?InterestIds=Y_77f04c37-b63e-46b4-a990-e926f7d129ff&activityId=5C6A87BC-5526-46F4-901E-EC9488C77557&apikey=0QfOX3Vn51YCzitbLaRkTTBadtWpgTN8NZLW0C1SEM&cm=zh-cn&it=edgeid&memory=8&scn=APP_ANON&timeOut=2000&user=m-140F5C1BE1EB62F02B664F5BE0C56313", {
        method: "GET",
        headers: {
            // "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36 Edg/122.0.0.0",
          
        }
    })
        .then((response) => { return response.json(); })
        .then((spare_data) => {
            console.log(spare_data);
            w2(spare_data);
        }).catch(err => {
            console.log(err);
        })

    function w2(data) {
        var i = 0
        for (i; i < 10; i++) {
            var r_num2 = Math.floor(Math.random() * 15)
            let url = data.sections[0].cards[r_num2].url
            let title = data.sections[0].cards[r_num2].title
            if (!title) {
                i -= 1
                continue
            }
            console.log(title)
            console.log(url)
            var news = document.querySelector(".news")
            var news_a = news.getElementsByTagName("a")
            news_a[i].href = url
            news_a[i].getElementsByTagName("p")[0].innerHTML = title
        }
    }
}
// 展示数据2
var newsbtn2 = document.querySelector(".newsbtn2")
var t2 = null
newsbtn2.onclick = () => {

    if (t2) {
        clearTimeout(t2)
        console.log("clear");
        t2 = null
    }
    t2 = setTimeout(() => { Fetch2(); console.log("执行了Fetch2()"); }, 3000)
}





